<template>
  <div class="editor-page">
    <div class="container page">
      <div class="row">

        <div class="col-md-10 offset-md-1 col-xs-12">
          <ul class="error-messages">
            <template
              v-for="(messages, field) in errors"
            >
              <li
                v-for="(message, index) in messages"
                :key="index"
              >{{ field }} {{ message }}</li>
            </template>
          </ul>
          <form @submit.stop.prevent="onSubmit">
            <fieldset>
              <fieldset class="form-group">
                  <input v-model="article.title" type="text" class="form-control form-control-lg" placeholder="Article Title" required>
              </fieldset>
              <fieldset class="form-group">
                  <input v-model="article.description" type="text" class="form-control" placeholder="What's this article about?">
              </fieldset>
              <fieldset class="form-group">
                  <textarea v-model="article.body" class="form-control" rows="8" placeholder="Write your article (in markdown)"></textarea>
              </fieldset>
              <fieldset class="form-group">
                  <input v-model="tag" type="text" class="form-control" placeholder="Enter tags"  @keypress.enter.prevent="addTag">
                  <div class="tag-list">
                    <span v-for="tagItem in article.tagList" class="tag-default tag-pill" :key="tagItem">
                      <i class="ion-close-round" @click="removeTag(tagItem)"></i>
                      {{tagItem}}
                    </span>
                  </div>
              </fieldset>
              <button class="btn btn-lg pull-xs-right btn-primary" >
                  Publish Article
              </button>
            </fieldset>
          </form>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { createArticles, editArticles, getArticle } from '@/api/article'
export default {
  // 在路由匹配组件渲染之前会先执行中间件处理
  middleware: 'authenticated',
  name: 'EditorIndex',
  data() {
    return {
      article: {
        title: '',
        description: '',
        body: '',
        tagList: []
      },
      tag: '',
      errors: {} 
    }
  },
  mounted() {
    this.getEditArticle()
  },
  methods: {
    async getEditArticle() {
      if(this.$route.params.slug) {
        const { data } = await getArticle(this.$route.params.slug)
        const { title, description, body, tagList } = data.article
        this.article = {
          title,
          description,
          body,
          tagList
        }
      }
    },
    addTag () {
      if(!this.article.tagList.includes(this.tag)) {
        this.article.tagList.push(this.tag);
        this.tag = '';
      }
    },
    removeTag(tagItem) {
      const index = this.article.tagList.findIndex(item => item ===tagItem);
      this.article.tagList.splice(index, 1)
    },
    async onSubmit() {
      try {
        if(this.$route.params.slug) {
          await editArticles(this.$route.params.slug, {
            article: this.article
          })
        } else {
          await createArticles({
            article: this.article
          })
        }
        
        this.$router.push('/')
      } catch (err) {
        // console.log('请求失败', err)
        this.errors = err.response.data.errors
      }
    }
  }
}
</script>

<style>

</style>
